<template>
  <div class="headerOuter" :style="{ backgroundColor: `rgba(53, 53, 53,.8)` }">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="logo">楠寻 | 个人博客</div>
        </el-col>
        <el-col :span="9" :offset="6">
          <ul class="headerNavList">
            <li v-for="item in headerMenuInfo.menu" :key="item.id"
              :class="{ headerListItem: item.id === headerNavindex }" @click="headerMenuBtn(item)">
              <i :class="`iconfont ${item.iconFont}`"></i>
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="3">
          <div class="user">
            <el-dropdown v-if="token" trigger="click">
              <span class="el-dropdown-link">
                <!-- 用户 -->
                {{ userInfo.username }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toBack" v-if="userInfo.isBlogger">进入后台</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div v-else class="user_login">
              <span @click="toLogin">登录/注册</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";

const router = useRouter();

const props = defineProps({
  headerNavindex: {
    type: Number,
    default: 1,
  },
});

const bgColor = ref("rgba(53, 53, 53, .3)"); // 背景色

const token = localStorage.getItem("token");

// 导航栏信息
const menuInfo = [
  {
    id: 1,
    title: "首页",
    router: "home",
    iconFont: "icon-shouyetianchong",
  },
  {
    id: 2,
    title: "文章",
    router: "article",
    iconFont: "icon-wenzhang1",
  },
  {
    id: 3,
    title: "归档",
    router: "archive",
    iconFont: "icon-wodeguidang",
  },
  {
    id: 4,
    title: "分类",
    router: "classifications",
    iconFont: "icon-fenleiorguangchangorqitatianchong",
  },
  {
    id: 5,
    title: "标签",
    router: "tags",
    iconFont: "icon-biaoqian1",
  },
  {
    id: 6,
    title: "关于",
    router: "concerning",
    iconFont: "icon-guanyu1",
  },
  /* {
    id: 6,
    title: '留言',
    router: '',
    iconFont: ''
  },
  {
    id: 7,
    title: '友链',
    router: '',
    iconFont: ''
  }, */
  /* {
    id: 8,
    title: "测试",
    router: "",
    iconFont: "",
  }, */
];

const headerMenuInfo = reactive({
  menu: menuInfo,
});

// 路由跳转
const routerTo = (path: string) => {
  console.log(path);
  router.push(`/${path}`);
};

// 用户登录信息
const userInfo = reactive(JSON.parse(localStorage.getItem("userInfo")!));

// 导航栏 class 绑定判断
let headerMenuflag = ref("001");
// 导航列表点击事件
const headerMenuBtn = (menuData: any) => {
  headerMenuflag.value = menuData.id;
  routerTo(menuData.router);
};

// 去登陆
const toLogin = () => {
  router.push("/login");
};

// 退出登录
const logout = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  router.push("/login");
  ElMessage.success("退出成功!");
};

// 进入后台
const toBack = () => {
  router.push("/layout/articles");
};
</script>

<style lang="scss" scoped>
.headerOuter {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 1;

  .header {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    padding-left: 60px;

    .flex-grow {
      flex-grow: 1;
    }

    .el-menu-demo {
      background-color: v-bind(bgColor);
    }

    .logo {
      height: 100%;
      font-size: 30px;
      line-height: 60px;
      color: #d4fffe;
      font-family: "楷体";
    }

    .headerNavList {
      height: 100%;
      display: flex;
      align-items: center;

      li {
        height: 100%;
        padding: 0 5px;
        display: flex;
        align-items: center;
        color: orange;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: 20px;
        }

        &:hover {
          background-color: rgba(232, 232, 232, 0.2);
          color: orange;
        }

        i {
          margin-right: 3px;
          font-size: 14px;
          color: rgb(255, 187, 142);
        }
      }

      .headerListItem {
        border-bottom: 3px solid rgb(74, 74, 255);
      }
    }

    .user {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: orange;
      font-size: 14px;

      .el-dropdown {
        color: white;
        cursor: pointer;
      }

      .user_login {
        cursor: pointer;
      }
    }
  }
}
</style>
